<template>
  <div class="swiper-dots-controls">
    <div
      class="dot-item"
      v-for="(item, index) in swiper.slides.length"
      :key="index"
      :class="currentSwiperIndex === index ? 'active' : ''"
    >
      1
    </div>
  </div>
</template>

<script setup lang="ts">
const swiper = useSwiper();
type Props = {
  currentSwiperIndex: number;
};

const props = withDefaults(defineProps<Props>(), {
  currentSwiperIndex: 0,
});
</script>
<style scoped lang="less">
.swiper-dots-controls {
  display: flex;
  justify-content: center;
  gap: 82px;
  .dot-item {
    width: 123px;
    height: 20px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    &.active {
      background-color: #fff;
    }
  }
}
</style>
